<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { linkTo } from '@/Utils';
  import { FolderOpenOutlined, FileWordOutlined, FileImageOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    defaultProps: { type: Object, default: () => {} }
  });
  const { defaultProps } = props;
  const dir_path = ref(defaultProps.dir_path);
  const dir_key = ref(defaultProps.dir_key);
  const dirs = ref(defaultProps.dirs);
  const treeData = ref(defaultProps.dirs);
  let breadcrumbs = computed(() => dir_path.value.split('/'));
  let activeIndex = ref(0);
  const onSelect = (index, info) => {
    if (dir_key !== index[0]) {
      let path = info.selectedNodes[0].props.path;
      linkTo('?dir_path=' + path + '&dir_key=' + index[0]);
    } else {
      return false;
    }
  };

  onMounted(() => {
    // console.log(treeData.value)
  });
</script>

<template>
  <div class="file-manager">
    <div class="file-manager-body">
      <div class="row">
        <div class="col-md-2 col-sm-12">
          <div class="box elevation-2 box-tree">
            <div class="box-header py-1">
              <h4 class="mb-0">目录结构</h4>
            </div>
            <div class="box-body">
              <a-tree
                :show-line="true"
                :show-icon="true"
                :tree-data="treeData"
                :default-expanded-keys="[dir_key]"
                :default-checked-keys="[dir_key]"
                :selectedKeys="[dir_key]"
                :autoExpandParent="true"
                @select="onSelect"
              >
                <template #switcherIcon>
                  <!--                   <i class="feather icon-folder"></i>-->
                </template>
              </a-tree>
            </div>
          </div>
        </div>
        <div class="col-md-10">
          <div class="box elevation-1">
            <div class="box-header py-1">
              <div class="file-manager-title w-100">
                <div class="bg-primary nav-breadcrumb elevation-2">
                  <div class="d-inline-flex">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb mb-0">
                        <template v-for="(item, index) in breadcrumbs" :key="index">
                          <li
                            class="breadcrumb-item"
                            :class="{ active: index === breadcrumbs.length - 1 }"
                          >
                            <a :href="'?dir_path=' + item">
                              <i class="feather icon-grid" v-if="index === 0"></i>
                              {{ item }}
                            </a>
                          </li>
                        </template>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div class="d-flex">
                <div class="file-item elevation-1">
                  <FolderOpenOutlined class="fa-5x text-info" />
                  <p class="badge badge-dark">目录</p>
                </div>
                <div class="file-item">
                  <FolderOpenOutlined class="fa-5x text-info" />
                  <p class="badge badge-dark">files</p>
                </div>
                <div class="file-item" style="color: green">
                  <FileImageOutlined class="fa-5x" />
                  <p class="badge badge-dark">图片文件</p>
                </div>
                <div class="file-item">
                  <FileWordOutlined class="fa-5x text-danger" />
                  <p class="badge badge-dark">word 文档</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .file-manager {
    .nav-breadcrumb {
      border-radius: 2px;
      .breadcrumb {
        background-color: unset;
        .breadcrumb-item {
          a {
            color: white;
          }
        }
        .breadcrumb-item.active {
          a {
            color: white;
          }
        }
      }
    }
    .file-item {
      width: 100px;
      height: 120px;
      text-align: center;
      border-radius: 2px;
      background: rgba(206, 210, 217, 0.6);
      margin: 2px;
      padding: 12px 4px 0 4px;
      p {
        margin: 1px auto;
      }
    }
  }
</style>
